import React,{ Component } from 'react'

import { HeaderContainer } from './Headerstyle'

import { NavLink } from 'react-router-dom'

class Header extends Component{
    render(){
        return(
            <HeaderContainer>
                <div className = "info_box">
                    <i className = "fa fa-list-ul" aria-hidden="true"></i>
                </div>
                <div className = "three_box">
                    <NavLink to = "/mine" activeClassName = "active">
                         <i className="fa fa-music" aria-hidden="true"></i>
                    </NavLink>
                    <NavLink to = '/home' activeClassName = "active" >
                        <i className="fa fa-headphones" aria-hidden="true"></i>
                    </NavLink>
                    <NavLink to = "/video" activeClassName = "active">
                        <i className="fa fa-play-circle-o" aria-hidden="true"></i>
                    </NavLink>
                </div>
                <div className = "search_box">
                    <i className = "fa fa-search" aria-hidden="true"></i>
                </div>
            </HeaderContainer>
        )
    }
}

export default Header